<template>
	<view class="contain">
		<view class="header">
			<u-avatar :src="info.avatar" size="180rpx" class="avatar"></u-avatar>
		</view>
		<view class="title">
			个人信息
		</view>
		<view class="form">
			<view class="info">
				<view class="label">
					姓&emsp;&emsp;名：
				</view>
				<view class="text">
					{{info.name}}
				</view>
			</view>
			<view class="info">
				<view class="label">
					学&emsp;&emsp;号：
				</view>
				<view class="text">
					{{info.username}}
				</view>
			</view>
			<view class="info">
				<view class="label">
					学&emsp;&emsp;院：
				</view>
				<view class="text">
					{{info.college}}
				</view>
			</view>
			<view class="info">
				<view class="label">
					专业班级：
				</view>
				<view class="text">
					{{info.major}}
				</view>
			</view>
			<view class="info">
				<view class="label">
					邮&emsp;&emsp;箱：
				</view>
				<view class="text" @click="setEmail">
					<text>
						{{info.email}}
					</text>
				</view>
			</view>

		</view>
		<view class="change">
			<button type="primary" @click="toChange()">
				修改信息
			</button>
		</view>
		<view class="exit">
			<button type="warn" @click="exit">
				退出账号
			</button>
		</view>
		<tabBar :value="1"></tabBar>
	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api
	import tabBar from '@/pages/tabBar.vue'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				info: {
					"id": "",
					"avatar": "",
					"name": "",
					"username": "",
					"email": "",
					"college": "",
					"major": ""
				}
			}
		},
		components: {
			tabBar
		},
		onLoad() {
			uni.hideTabBar()
			this.checkToken()
			// 请求数据

			let token = uni.getStorageSync('token')

			api.getUserInfo(token).then(res => {
				if (res.code === 1) {
					let data = res.data[0]
					this.info = data
				} else {
					uni.showModal({
						content: res.errors
					})
				}

			}).catch(err => {
				console.log(err)
			});

		},
		onShow() {
			// 请求数据
			let token = uni.getStorageSync('token')

			api.getUserInfo(token).then(res => {
				if (res.code === 1) {
					let data = res.data[0]
					this.info = data
				} else {
					uni.showModal({
						content: res.errors
					})
				}

			}).catch(err => {
				console.log(err)
			});

		},
		methods: {
			...mapMutations(['checkToken', 'clearAll']),
			exit() {
				this.clearAll();
				uni.redirectTo({
					url: "../index/index"
				})
			},
			toChange() {
				uni.navigateTo({
					url: `../change/change?id=${this.info.id}&email=${this.info.email}&avatar=${this.info.avatar}&name=${this.info.name}`
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.contain {
		.header {
			background-color: #a62618;
			@header-height : 300rpx;
			height: @header-height;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.avatar {
				
			}


		}

		.header::before {
			content: '';
			display: table;
		}

		.title {
			height: 140rpx;
			line-height: 140rpx;
			text-align: center;
			color: #a62618;
			font-size: 20px;
			border-bottom: #a62618 1px solid;
		}

		.form {
			text-align: center;
			font-size: 20px;
			// border: #a62618 1px solid;
			font-size: 30rpx;

			.info {
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: #a62618 2rpx solid;

				.label {
					width: 240rpx;
					float: left;
				}

				.text {
					text-align: left;

					width: 500rpx;
					float: right;
				}

				.text::after {
					clear: both;
				}
			}
		}

		.change {
			// border-top: #a62618 1px solid;
			margin: 2px 0;
		}

		.exit {
			// border: #a62618 1px solid;
			margin: 2px 0;
		}
	}
</style>
